import React, { FC } from "react"
import { Outlet } from "react-router-dom"
import { Layout, Spin } from "antd"
import styles from "./MainLayout.module.scss"
import Logo from "../../components/Logo"
import UserInfo from "../../components/UserInfo"
import useLoadUserData from "../../hooks/useLoadUserData"
import useNavPage from "../../hooks/useNavPage"

const { Header, Content, Footer } = Layout

const MainLayout: FC = () => {
    const { waitingUserData } = useLoadUserData()
    useNavPage(waitingUserData) // 没有返回值

    return (
        <Layout>
            <Header className={styles.header}>
                <div className={styles.left}>
                    <Logo />
                </div>
                <div className={styles.right}>
                    <UserInfo />
                </div>
            </Header>
            <Content className={styles.main}>
                {/* 路由占位符 */}
                {/* 不用等待加载数据（等待完成），渲染页面 */}
                {waitingUserData ? (
                    <div style={{ textAlign: "center", marginTop: "60px" }}>
                        <Spin />
                    </div>
                ) : (
                    <Outlet />
                )}
            </Content>
            <Footer className={styles.footer}>问卷星途 &copy; 2025 - present. Created by hui</Footer>
        </Layout>
    )
}

export default MainLayout
